<template>
    <div class="init">
        <div class="order">
            <h1 class="title">{{$t('message.money')}}</h1>
            <div class="orderList">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!-- 当前委托 -->
                    <el-tab-pane :label="$t('message.Commissioned')" name="first">
                        <!-- 当前委托 -->
                        <div class="choice">
                            <el-select
                                v-model="childCoinValue"
                                @change="ObtainChildCoinChange"
                                clearable
                                :placeholder="$t('message.types')"
                            >
                                <el-option
                                    v-for="item in childCoinList"
                                    :key="item.value"
                                    :label="item.virtualWalletName"
                                    :value="item.childCoin"
                                ></el-option>
                            </el-select>/
                            <el-select
                                v-model="motherCoinValue"
                                @change="ObtainMotherCoinChange"
                                clearable
                                :placeholder="$t('message.selecta')"
                            >
                                <el-option
                                    v-for="item in motherCoinList"
                                    :key="item.value"
                                    :label="item.virtualWalletName"
                                    :value="item.motherCoin"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-model="value"
                                @change="EntrustTypeChange"
                                :placeholder="$t('message.Alltypes')"
                            >
                                <el-option selected :label="$t('message.buying')" value="0"></el-option>
                                <el-option :label="$t('message.entrustt')" value="1"></el-option>
                            </el-select>
                            <span class="sel" @click="currencyList">{{$t('message.search')}}</span>
                        </div>
                        <div>
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column prop="createTime" :label="$t('message.Creation')" width="180"></el-table-column>
                                <el-table-column prop="virtualWalletPairName" :label="$t('message.Tradingdui')"></el-table-column>
                                <el-table-column prop="tradeType" :label="$t('message.type')" width="100"></el-table-column>
                                <el-table-column prop="tradePrice" :label="$t('message.Theprice')" width="100"></el-table-column>
                                <el-table-column prop="tradeAmount" :label="$t('message.number')"></el-table-column>
                                <el-table-column :label="$t('message.totaltotal')" width="180">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.tradeAmount*scope.row.tradePrice}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="tradeStatus" :label="$t('message.orderstatus')" width="180">
                                    <template slot-scope="scope">
                                        <span v-show="scope.row.tradeStatus == 0?true:false">{{$t('message.Tradingin')}}</span>
                                        <span v-show="scope.row.tradeStatus == 1?true:false">{{$t('message.completed')}}</span>
                                        <span v-show="scope.row.tradeStatus == 2?true:false">{{$t('message.undo')}}</span>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column :label="$t('message.operation')" width="120">
                                    <template slot-scope="scope">
                                        <span
                                            @click="handleClose(scope.$index,tableData[scope.$index])"
                                            style="color:rgb(113, 151, 255)"
                                        >{{$t('message.undo')}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-pagination
                                @current-change="handleCurrentChange"
                                background
                                layout="prev, pager, next"
                                :total="total"
                                :page-size="rows"
                                class="page"
                            ></el-pagination>
                        </div>
                    </el-tab-pane>
                    <!-- 历史委托 -->
                    <el-tab-pane :label="$t('message.history')" name="second">
                        <!-- 历史委托 -->
                        <div class="choice">
                            <!-- 选择时间 -->
                            <el-date-picker
                                v-model="startTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                style="width:200px;"
                                clearable
                                :placeholder="$t('message.Thestarttime')"
                            ></el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                clearable
                                v-model="endTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                style="width:200px;"
                                :placeholder="$t('message.endoftime')"
                            ></el-date-picker>
                            <el-select
                                v-model="childCoinValue1"
                                @change="ObtainChildCoinChange1"
                                clearable
                                :placeholder="$t('message.types')"
                                style="width:150px;"
                            >
                                <el-option
                                    v-for="item in childCoinList1"
                                    :key="item.value"
                                    :label="item.virtualWalletName"
                                    :value="item.childCoin"
                                ></el-option>
                            </el-select>/
                            <el-select
                                v-model="motherCoinValue1"
                                @change="ObtainMotherCoinChange1"
                                clearable
                                style="width:150px;"
                                :placeholder="$t('message.selecta')"
                            >
                                <el-option
                                    v-for="item in motherCoinList1"
                                    :key="item.value"
                                    :label="item.virtualWalletName"
                                    :value="item.motherCoin"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-model="value"
                                @change="EntrustTypeChange1"
                                :placeholder="$t('message.Alltypes')"
                            >
                                <el-option selected :label="$t('message.buying')" value="0"></el-option>
                                <el-option :label="$t('message.entrustt')" value="1"></el-option>
                            </el-select>
                            <span class="sel" @click="currencyList1">{{$t('message.search')}}</span>
                        </div>
                        <div>
                            <el-table :data="tableData1" style="width: 100%">
                                <el-table-column prop="createTime" :label="$t('message.Creation')" width="180"></el-table-column>
                                <el-table-column prop="virtualWalletPairName" :label="$t('message.Tradingdui')"></el-table-column>
                                <el-table-column prop="tradeType" :label="$t('message.type')" width="180"></el-table-column>
                                <el-table-column prop="tradePrice" :label="$t('message.Theprice')" width="180"></el-table-column>
                                <el-table-column prop="tradeAmount" :label="$t('message.number')"></el-table-column>
                                
                                <el-table-column :label="$t('message.totaltotal')" width="180">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.tradeAmount*scope.row.tradePrice | three}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="handlingFee" :label="$t('message.serviceCharge')"></el-table-column>
                                <el-table-column prop="tradeStatus" :label="$t('message.orderstatus')" width="180">
                                    <template slot-scope="scope">
                                        <span v-show="scope.row.tradeStatus == 0?true:false">{{$t('message.Tradingin')}}</span>
                                        <span v-show="scope.row.tradeStatus == 1?true:false">{{$t('message.completed')}}</span>
                                        <span v-show="scope.row.tradeStatus == 2?true:false">{{$t('message.undo')}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-pagination
                                @current-change="handleCurrentChange1"
                                background
                                layout="prev, pager, next"
                                :total="total1"
                                :page-size="rows1"
                                class="page"
                            ></el-pagination>
                        </div>
                    </el-tab-pane>
                    <!-- 成交明细 -->
                    <el-tab-pane :label="$t('message.detail')" name="third">
                        <div class="choice">
                            <!-- 选择时间 -->
                            <el-date-picker
                                v-model="startTime1"
                                type="date"
                                clearable
                                value-format="yyyy-MM-dd"
                                :placeholder="$t('message.Thestarttime')"
                            ></el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                clearable
                                v-model="endTime1"
                                type="date"
                                value-format="yyyy-MM-dd"
                                :placeholder="$t('message.endoftime')"
                            ></el-date-picker>
                            <el-select
                                v-model="childCoinValue2"
                                @change="ObtainChildCoinChange2"
                                clearable
                                :placeholder="$t('message.types')"
                                style="width:150px;"
                            >
                                <el-option
                                    v-for="item in childCoinList2"
                                    :key="item.value"
                                    :label="item.virtualWalletName"
                                    :value="item.childCoin"
                                ></el-option>
                            </el-select>/
                            <el-select
                                v-model="motherCoinValue2"
                                @change="ObtainMotherCoinChange2"
                                clearable
                                style="width:150px;"
                                :placeholder="$t('message.selecta')"
                            >
                                <el-option
                                    v-for="item in motherCoinList2"
                                    :key="item.value"
                                    :label="item.virtualWalletName"
                                    :value="item.motherCoin"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-model="value"
                                @change="EntrustTypeChange2"
                                :placeholder="$t('message.Alltypes')"
                            >
                                <el-option selected :label="$t('message.buying')" value="0"></el-option>
                                <el-option :label="$t('message.entrustt')" value="1"></el-option>
                            </el-select>
                            <span class="sel" @click="currencyList2">{{$t('message.search')}}</span>
                        </div>
                        <div>
                            <el-table :data="tableData2" style="width: 100%">
                                <el-table-column prop="createTime" :label="$t('message.Creation')" width="180"></el-table-column>
                                <el-table-column prop="virtualWalletPairName" :label="$t('message.Tradingdui')"></el-table-column>
                                <el-table-column prop="entrustType" :label="$t('message.way')" width="180"></el-table-column>
                                <el-table-column prop="tradeType" :label="$t('message.type')" width="180"></el-table-column>
                                <el-table-column prop="tradePrice" :label="$t('message.Theprice')"></el-table-column>
                                <el-table-column prop="tradeAmount" :label="$t('message.number')" width="180"></el-table-column>
                                
                                <el-table-column prop="totalAmount" :label="$t('message.turnover')" width="180"></el-table-column>
                                <el-table-column prop="handlingFee" :label="$t('message.serviceCharge')"></el-table-column>
                                <!-- <el-table-column prop="name" :label="$t('message.poundage')" width="180"></el-table-column> -->
                            </el-table>
                            <el-pagination
                                @current-change="handleCurrentChange2"
                                background
                                layout="prev, pager, next"
                                :total="total2"
                                :page-size="rows2"
                                class="page"
                            ></el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
// import {
//     listEntrust,
//     childCoin,
//     motherCoin,
//     CancelOrder,
//     transactionDetails
// } from "../api/api";
import qs from "qs";
export default {
    data() {
        return {
            // 当前委托
            options: [],
            EntrustType: "",
            motherCoinValue: "",
            childCoinValue: "",
            value: "",
            value1: "",
            value2: "",
            checked: "",
            activeName: "first",
            tableData: [],
            childCoinMsg: "",
            childCoinList: [],
            motherCoinMsg: "",
            motherCoinList: [],
            childVirtualWalletPairId: "",
            motherVirtualWalletPairId: "",
            page: 1,
            rows: 10,
            total: 0,
            virtualWalletPairId: 1,
            TotalEntrustedAmount: 0,
            //历史委托
            options1: [],
            EntrustType1: "",
            motherCoinValue1: "",
            childCoinValue1: "",
            value1: "",
            value2: "",
            checked1: "",
            tableData1: [],
            childCoinMsg1: "",
            childCoinList1: [],
            motherCoinMsg1: "",
            motherCoinList1: [],
            childVirtualWalletPairId1: "",
            motherVirtualWalletPairId1: "",
            page1: 1,
            rows1: 10,
            total1: 0,
            virtualWalletPairId1: 1,
            startTime: "",
            endTime: "",
            // 成交明细
            tableData2: [],
            transactionType: "",
            options2: [],
            EntrustType2: "",
            motherCoinValue2: "",
            childCoinValue2: "",
            value1: "",
            value2: "",
            checked2: "",
            childCoinMsg2: "",
            childCoinList2: [],
            motherCoinMsg2: "",
            motherCoinList2: [],
            childVirtualWalletPairId2: "",
            motherVirtualWalletPairId2: "",
            page2: 1,
            rows2: 10,
            total2: 0,
            virtualWalletPairId2: 1,
            startTime1: "",
            endTime1: ""
        };
    },
    mounted() {
        // 当前委托
        this.currencyList();
        this.ObtainMotherCoin(this.childCoinMsg);
        this.ObtainChildCoin(this.motherCoinMsg);

        // 历史委托
        this.currencyList1();
        this.ObtainMotherCoin1(this.childCoinMsg1);
        this.ObtainChildCoin1(this.motherCoinMsg1);

        //成交明细
        this.currencyList2();
        this.ObtainMotherCoin2(this.childCoinMsg2);
        this.ObtainChildCoin2(this.motherCoinMsg2);
    },
    methods: {
        // 撤销
        handleClose(index, row) {
            var id = row.id;
            var token = JSON.parse(window.sessionStorage.getItem("token"));
            let data = qs.stringify({
                tradePoolId: id,
                token: token
            });
            this.$confirm(this.$t('message.cancellation'))
                .then(_ => {
                    CancelOrder(data).then(res => {
                         console.log(res.data,9999)
                        if (res.data.code == 200) {
                           
                            this.$message({
                                message: this.$t('message.Withdrawal'),
                                type: "success"
                            });
                            this.currencyList();
                        } else {
                            this.$message.error(res.data.msg);
                            return false;
                        }
                    });
                })
                .catch(_ => {});
        },
        handleCurrentChange(val) {
            console.log(val);
            this.page = val;
            this.currencyList();
        },
        // 分页

        handleClick(tab, event) {
            console.log(tab, event);
        },
        currencyList() {
            if (
                !(
                    (this.childVirtualWalletPairId == "" &&
                        this.motherVirtualWalletPairId == "") ||
                    (this.childVirtualWalletPairId !== "" &&
                        this.motherVirtualWalletPairId !== "")
                )
            ) {
                this.$message.error(this.$t('message.matching'));
                return false;
            }
            let data = {
                entrustType: this.EntrustType,
                historyIs: "0",
                page: this.page,
                rows: this.rows,
                childVirtualWalletPairId: this.childVirtualWalletPairId,
                motherVirtualWalletPairId: this.motherVirtualWalletPairId,
                token: JSON.parse(window.sessionStorage.getItem("token"))
            };
            listEntrust(data).then(res => {
                console.log(res);
                this.tableData = res.data.data;
                this.total = res.data.count;
                // this.TotalEntrustedAmount =
            });
        },
        // 获取母币
        ObtainMotherCoin(mo) {
            // this.motherCoinMsg = val==undefined? '':val+'';
            let data = {
                childCoin: mo
            };
            motherCoin(data).then(res => {
                this.motherCoinList = res.data.data;
            });
        },
        ObtainChildCoin(ch) {
            // this.childCoinMsg = val==undefined? '':val+'';
            let data = {
                motherCoin: ch
            };
            childCoin(data).then(res => {
                this.childCoinList = res.data.data;
            });
        },
        ObtainMotherCoinChange(val) {
            // 获取分母
            this.childVirtualWalletPairId = val;
            this.ObtainChildCoin(val);
            console.log(this.virtualWalletPairId);
            console.log(this.value);
        },
        ObtainChildCoinChange(val) {
            // 获取分子
            this.ObtainMotherCoin(val);
            this.motherVirtualWalletPairId = val;
            console.log(this.virtualWalletPairId);
            console.log(this.value);
        },
        // 委托类型
        EntrustTypeChange(val) {
            this.EntrustType = val;
        },

        // 历史委托
        // 分页
        handleCurrentChange1(val) {
            console.log(val);
            this.page1 = val;
            this.currencyList1();
        },
        handleClick1(tab, event) {
            console.log(tab, event);
        },
        currencyList1() {
            let data = {
                startTime:
                this.startTime == "" ? "" : this.startTime + " 00:00:00",
                endTime: this.endTime == "" ? "" : this.endTime + " 23:59:59",
                entrustType: this.EntrustType1,
                historyIs: "1",
                page: this.page1,
                rows: this.rows1,
                childVirtualWalletPairId: this.motherVirtualWalletPairId1,
                motherVirtualWalletPairId: this.childVirtualWalletPairId1 ,
                token: JSON.parse(window.sessionStorage.getItem("token"))
            };
            listEntrust(data).then(res => {
                console.log(res);
                this.tableData1 = res.data.data;
                this.total1 = res.data.count;
            });
        },
        // 获取母币
        ObtainMotherCoin1(mo) {
            // this.motherCoinMsg = val==undefined? '':val+'';
            let data = {
                childCoin: mo
            };
            motherCoin(data).then(res => {
                this.motherCoinList1 = res.data.data;
            });
        },
        ObtainChildCoin1(ch) {
            // this.childCoinMsg = val==undefined? '':val+'';
            let data = {
                motherCoin: ch
            };
            childCoin(data).then(res => {
                this.childCoinList1 = res.data.data;
            });
        },
        ObtainMotherCoinChange1(val) {
            // 获取分母
            this.childVirtualWalletPairId1 = val;
            this.ObtainChildCoin1(val);
            console.log(this.virtualWalletPairId);
            console.log(this.value);
        },
        ObtainChildCoinChange1(val) {
            // 获取分子
            this.ObtainMotherCoin1(val);
            this.motherVirtualWalletPairId1 = val;
            console.log(this.value);
        },
        // 委托类型
        EntrustTypeChange1(val) {
            this.EntrustType1 = val;
        },

        // 成交明细
        handleCurrentChange2(val) {
            console.log(val);
            this.page2 = val;
            this.currencyList2();
        },
        handleClick2(tab, event) {
            console.log(tab, event);
        },
        currencyList2() {
            let data = {
                startTime:
                this.startTime1 == "" ? "" : this.startTime1 + " 00:00:00",
                endTime: this.endTime1 == "" ? "" : this.endTime1 + " 23:59:59",
                type: this.EntrustType2,
                page: this.page2,
                rows: this.rows2,
                childVirtualWalletPairId: this.motherVirtualWalletPairId2,
                motherVirtualWalletPairId: this.childVirtualWalletPairId2,
                token: JSON.parse(window.sessionStorage.getItem("token"))
            };
            transactionDetails(data).then(res => {
                console.log(res);
                this.tableData2 = res.data.data;
                this.total2 = res.data.count;
            });
        },
        // 获取母币
        ObtainMotherCoin2(mo) {
            // this.motherCoinMsg = val==undefined? '':val+'';
            let data = {
                childCoin: mo
            };
            motherCoin(data).then(res => {
                this.motherCoinList2 = res.data.data;
            });
        },
        ObtainChildCoin2(ch) {
            // this.childCoinMsg = val==undefined? '':val+'';
            let data = {
                motherCoin: ch
            };
            childCoin(data).then(res => {
                this.childCoinList2 = res.data.data;
            });
        },
        ObtainMotherCoinChange2(val) {
            // 获取分母
            this.childVirtualWalletPairId2 = val;
            this.ObtainChildCoin2(val);
            console.log(this.virtualWalletPairId);
            console.log(this.value);
        },
        ObtainChildCoinChange2(val) {
            // 获取分子
            this.ObtainMotherCoin2(val);
            this.motherVirtualWalletPairId2 = val;
            console.log(this.value);
        },
        // 委托类型
        EntrustTypeChange2(val) {
            this.EntrustType2 = val;
        }
    },
    filters:{
        three(val){
            var newVal = val.toString().split('.');
             console.log(newVal.length,666)
             if(newVal.length>1){
                 if(newVal[1].length>3){
                    return Number(val).toFixed(3)
                }else{
                 return val
                }
             }else{
                 return val
             }
            // if(newVal[1].length>3){
            //     return Number(val).toFixed(3)
            // }else{
            //     return val
            // }
                
       
            
        }
    }
};
</script>
<style lang="scss" scoped>
.init {
    width: 100%;
    background: #fff;
    .order {
        width: 1200px;
        margin: 0 auto;
        background: #fff;
        .title {
            font-size: 22px;
            font-weight: 700;
            background: rgba(247, 247, 251, 1);
            line-height: 60px;
            padding-left: 20px;
        }
        .orderList {
            width: 100%;
            min-height: 563px;
            border: #f2f2f2 solid 1px;
            padding: 10px;
            box-sizing: border-box;
            .Revoke {
                padding: 5px 8px;
                width: 72px;
                height: 30px;
                background: rgba(104, 129, 255, 1);
                opacity: 0.46;
                border-radius: 13px;
                color: #fff;
            }
        }
    }
}
</style>